<template>
  <div class="shareBtn">
    <div @click="showGoodsCode" class="share-btn">
      <div class="share-wrap" >
        <img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_share.png" alt="">
        <div class="txt">分享</div>
      </div>
    </div>
    <!-- 商品分享弹窗 -->
    <god-share-cpt ref="godShareCpts" @share="shareGoods"></god-share-cpt>
    <!-- 商品分享二维码弹窗 -->
    <goods-code :visible.sync="goodsCodeDialogVisible" :codeData="qrcode"></goods-code>
  </div>
	
</template>

<script>
  // TODO 小程序不使用拖动组件
  // import dragWrap from '@/components/dragwrap'
  import Vue from 'vue'
  import GodShareCpt from '@/components/god/god-share'
  import goodsCode from '@/views/item/components/goodsCode'
  import { getPoster } from '@/api/item/activity'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        goodsCodeDialogVisible: false,
        detailAll: {
          item_detail: {
            title: '标题'
          }
        },
        qrcode: ''
      }
    },
    props: {
      poster_url: {
        type: String
      },
      title: {
        type: String
      }
    },
    watch: {
      title(val) {
        this.detailAll.item_detail.title = val
      }
    },
    components: {
      // dragWrap,
      GodShareCpt,
      goodsCode
    },
    methods: {
      // 商品分享
      showGoodsCode() {
        this.$refs['godShareCpts'].show(this.detailAll)
      },
      getPosterFn() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        getPoster({
          source_url: this.poster_url,
          x: 0,
          y: 0,
          width: 300,
          height: 492
        }).then(res => {
          // console.log(res, '111111')
          this.$loadingWrap.close()
          this.qrcode = res.data
        })
      },
      // 分享的二维码
      shareGoods() {
        this.goodsCodeDialogVisible = true
        this.getPosterFn()
      }
    }
  })
</script>

<style lang="scss">
  .miniprogram-root{
    .shareBtn{
      position: fixed;
      z-index: 9;
      left: 2%;
      top: 80%;
    }
  }
  .shareBtn{
    .code-dialog .code-wrap{
      padding: 0!important;
    }
    .share-btn{
      bottom: 130px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      color: #333;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
    }
    .share-wrap{
      img{
        width: 42px;
        height: 42px;
      }
      .txt{
        font-size: 20px;
      }
    }
  }
</style>
